<template>
    <div>
      <el-scrollbar height="600px">
        <el-card>
          <el-row :gutter="20" class="header">
            <el-col :span="6">
              <el-input placeholder="请输入课程名称"
              style="width: 100%"
              v-model="queryInfo.name" clearable @clear="getCourseList"></el-input>
            </el-col>
            <el-col :span="6">
              <el-input placeholder="请输入课程序号"
              style="width: 100%"
              v-model="queryInfo.courseId" clearable @clear="getCourseList"></el-input>
            </el-col>
            <el-col :span="6">
              <el-button type="primary" :icon="Search" @click="getCourseList">搜索</el-button>
            </el-col>
          </el-row>
                <el-col :span="4">
                        <el-button type="primary"
                        :icon="Edit"
                        style="margin-top: 10px;margin-bottom: 10px;"
                        @click="dialogVisible = true">创建课程</el-button>
                </el-col>
            <el-table :data="tableData" height="250" style="width: 100%;">
            <el-table-column prop="courseId" label="课程序号" width="180" />
            <el-table-column prop="name" label="课程名" width="180" />
            <el-table-column prop="profile" label="课程详情" />
            <el-table-column label="查看详情">
                <template v-slot="scope">
                <el-button @click="viewDetails(scope.row)">详情</el-button>
                </template>
            </el-table-column>
            </el-table>
            <el-pagination
              background="true"
              layout="prev, pager, next"
              :total="total"
              v-model:currentPage="queryInfo.page"
              :page-size="queryInfo.size"
              @current-change="handlePageChange"
            />
        </el-card>
        <el-dialog
            title="创建课程"
            v-model="dialogVisible"
            >
            <el-form :model="newCourse" label-width="140px">
                <el-form-item label="课程序号">
                <el-input v-model="newCourse.courseId"></el-input>
                </el-form-item>
                <el-form-item label="课程名称">
                <el-input v-model="newCourse.name"></el-input>
                </el-form-item>
                <el-form-item label="课程详情">
                <el-input v-model="newCourse.profile"></el-input>
                </el-form-item>
            </el-form>
            <template v-slot:footer>
                <span class="dialog-footer">
                <el-button @click="dialogVisible=false">取消</el-button>
                <el-button type="primary" @click="saveCourse">保存</el-button>
                </span>
            </template>
            </el-dialog>
          </el-scrollbar>
    </div>
  </template>

<script setup>
import { ref, onMounted } from 'vue'
import { Search, Edit } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getCourse } from '@/api/courses'
import { addCourses } from '@/api/addCourse'

const router = useRouter()

const total = ref(0)

const currentPage = ref(1)

const queryInfo = ref({
  courseId: '',
  name: '',
  teacher: '',
  page: currentPage,
  size: 5
})

const tableData = ref([])

const getCourseList = async () => {
  const res = await getCourse(queryInfo.value)
  console.log(res)
  tableData.value = res.data.data.rows
  total.value = res.data.data.total
}

const dialogVisible = ref(false)

const newCourse = ref({
  courseId: '',
  name: '',
  profile: ''
})

const saveCourse = async () => {
  if (!newCourse.value.courseId || !newCourse.value.name) {
    ElMessage.error('课程序号和课程名称不能为空')
    return
  }
  const res = await addCourses(newCourse.value)
  console.log(res)
  tableData.value.push({ ...newCourse })
  if (res.data.code === 0) {
    ElMessage.success('创建成功！')
  } else {
    ElMessage.error('课程号已存在！')
  }
  // 清空表单数据
  newCourse.value.courseId = ''
  newCourse.value.name = ''
  newCourse.value.profile = ''
  // 关闭弹窗
  dialogVisible.value = false
}

const viewDetails = (row) => {
  // 查看详情的操作
  console.log('查看详情', row)
  router.push({ name: 'CourseDetail', params: { courseId: row.courseId } })
}

const handlePageChange = () => {
  getCourseList()
}

onMounted(getCourseList)
</script>

<style>
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
